
<template>
  <div>
    <van-search
      v-model.trim="keyword"
      shape="round"
      placeholder="请输入搜索关键词"
      @input="input"
    />
    <!-- 搜索下容器 -->
    <div class="search_wrap" v-if="resultList.length === 0">
      <!-- 标题 -->
      <p class="hot_title">热门搜索</p>
      <!-- 热搜关键词容器 -->
      <div class="hot_name_wrap">
        <!-- 每个搜索关键词 -->
        <span
          class="hot_item"
          v-for="item in hotArr"
          :key="item.first"
          @click="btn(item.first)"
        >
          {{ item.first }}
        </span>
      </div>
    </div>
    <!-- 搜索结果 -->
    <div class="search_wrap" v-else>
      <!-- 标题 -->
      <p class="hot_title">最佳匹配</p>
      <!-- vant list -->
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <!-- <van-cell
          center
          v-for="obj in resultList"
          :key="obj.id"
          :title="obj.name"
          :label="obj.ar[0].name + ' - ' + obj.name"
        >
          <template #right-icon>
            <van-icon name="play-circle-o" size="0.6rem" />
          </template>
        </van-cell> -->
        <SongItem
          v-for="item in resultList"
          :key="item.id"
          :name="item.name"
          :author="item.ar[0].name"
          :id="item.id"
        ></SongItem>
      </van-list>
    </div>
  </div>
</template>

<script>
import SongItem from "../../components/SongItem.vue";

import { hotSearchAPI, searchResultAPI } from "../../api/index";
export default {
  data() {
    return {
      keyword: "",
      hotArr: [], // 热搜关键字
      resultList: [], // 搜索结果
      // 加载中 (状态) - 只有为false, 才能触底后自动触发onload方法
      loading: false,
      // 未加载全部 (如果设置为true, 底部就不会再次执行onload, 代表全部加载完成)
      finished: false,
      page: 1, // 当前搜索结果的页码
      timer: null,
    };
  },
  created() {
    hotSearchAPI().then((res) => {
      // console.log(res);
      this.hotArr = res.data.result.hots;
      // console.log(this.hotArr);
    });
  },
  methods: {
    btn(key) {
      // 点击热搜关键词
      // 点击新关键词-可能有新的数据
      this.page = 1;
      this.finished = false;

      this.keyword = key; // 选中的关键词显示到搜索框
      this.getListFn().then((res) => {
        // console.log(res);
        //把数据给搜索结果
        this.resultList = res.data.result.songs;
        // console.log(this.resultList);
        // 本次数据加载完毕-才能让list加载更多,重新调用onload
        this.loading = false;
      });
    },
    getListFn() {
      return searchResultAPI({
        keywords: this.keyword,
        limit: 20,
        offset: (this.page - 1) * 20,
      });
    },
    // 输入框内容变化
    input() {
      if (this.timer) clearInterval(this.timer);
      this.timer = setTimeout(() => {
        // 输入框关键字改变-可能有新数据(不一定加载完成了)可以调用onload
        this.page = 1;
        this.finished = false;

        // console.log(this.keyword);
        if (this.keyword.length === 0) {
          // 搜索关键词如果没有, 就把搜索结果清空阻止网络请求发送(提前return)
          this.resultList = [];
          return;
        }
        this.getListFn().then((res) => {
          // 如果搜索结果响应数据没有songs字段-无数据
          if (res.data.result.songs === undefined) {
            this.resultList = [];
            return;
          }
          this.resultList = res.data.result.songs;
          // 本次数据加载完毕-才能让list加载更多,重新调用onload
          this.loading = false;
        });
      }, 900);
    },
    onLoad() {
      console.log(
        "准备触底了" +
          "\nloading:" +
          this.loading +
          "\nfinished:" +
          this.finished
      );
      // 异步更新数据
      this.page++;
      this.getListFn().then((res) => {
        console.log(res);
        //如果没有更多数据了
        // console.log(res.data.result.songs);
        if (res.data.result.songs === undefined) {
          // 全部加载完成(list不会在触发onload方法)
          this.finished = true;
          // 本次加载完成
          this.loading = false;
          return;
        }
        // //打散 添加数据
        this.resultList.push(...res.data.result.songs);
        // 数据加载完毕-保证下一次还能触发onload
        this.loading = false;
      });
    },
  },
  components: {
    SongItem,
  },
};
</script>

<style scoped>
/* 搜索容器的样式 */
.search_wrap {
  padding: 0.266667rem;
}

/*热门搜索文字标题样式 */
.hot_title {
  font-size: 0.32rem;
  color: #666;
}

/* 热搜词_容器 */
.hot_name_wrap {
  margin: 0.266667rem 0;
}

/* 热搜词_样式 */
.hot_item {
  display: inline-block;
  height: 0.853333rem;
  margin-right: 0.213333rem;
  margin-bottom: 0.213333rem;
  padding: 0 0.373333rem;
  font-size: 0.373333rem;
  line-height: 0.853333rem;
  color: #333;
  border-color: #d3d4da;
  border-radius: 0.853333rem;
  border: 1px solid #d3d4da;
}

/* 给单元格设置底部边框 */
/* .van-cell {
  border-bottom: 1px solid lightgray;
} */
</style>